<template>
    <div :style="{ position: 'fixed', width: '100%',}">
        <a-menu
                class="topMenu"
                v-model="current"
                mode="horizontal"
                style="margin-bottom:5px; background-color:deepskyblue;height: 50px;
"
        >
            <a-menu-item key="key_home">
                <a style="color:#868686 " href="/home"> 麦猫首页</a>
            </a-menu-item>


            <a-menu-item v-if="!loginUser" style="float:right">
                <router-link to="/login">小麦 请登录</router-link>
            </a-menu-item>
            <a-menu-item v-if="!loginUser" style="float:right">
                <a to="/login">
                    <span>免费注册</span>
                </a>
            </a-menu-item>
            <a-sub-menu style="float:right">
                <span slot="title" class="submenu-title-wrapper"
                >卖家中心</span
                >
                <a-menu-item class="topMenu">
                    <a @click="openShop">免费开店</a>
                </a-menu-item>
                <a-menu-item class="topMenu">
                    <a>已卖出的宝贝</a>
                </a-menu-item>
                <a-menu-item class="topMenu" key="setting:2">
                    <a>出售中的宝贝</a>

                </a-menu-item>

            </a-sub-menu>

            <a-sub-menu style="float:right">
                <span slot="title" class="submenu-title-wrapper"
                >收藏夹</span
                >
                <a-menu-item class="topMenu">
                    <a>收藏的宝贝</a>
                </a-menu-item>
                <a-menu-item class="topMenu" key="setting:2">
                    <a>收藏的店铺</a>

                </a-menu-item>

            </a-sub-menu>

            <a-sub-menu style="float:right">
                <span slot="title" class="submenu-title-wrapper"
                >我的麦猫</span
                >
                <a-menu-item class="topMenu">
                    <a>已买到的宝贝</a>
                </a-menu-item>
                <a-menu-item class="topMenu" key="setting:2">
                    <a>我的足迹</a>

                </a-menu-item>

            </a-sub-menu>
            <a-sub-menu style="float:right" v-if="loginUser">
                <span slot="title" class="submenu-title-wrapper"
                >一颗小陨石</span
                >
                <a-card hoverable style="width: 300px">
                    <img
                            slot="cover"
                            alt="example"
                            src="http://120.27.212.10:9090/group1/M00/00/00/eBvUCl_ZY9qABFSeADAPbaC5QN4056.jpg"
                    />
                    <template slot="actions" class="ant-card-actions">
                        <a-icon key="setting" type="setting" @click="test"/>
                        <a-icon key="edit" type="edit"/>
                        <a @click="handleLogout">退出</a>
                    </template>
                    <a-card-meta :title="loginUser.username" description="普通会员">
                        <a-avatar
                                slot="avatar"
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        />
                    </a-card-meta>
                </a-card>
            </a-sub-menu>

        </a-menu>
    </div>
</template>

<script>
    export default {
        name: "CellNavBar",
        data() {
            return {
                current: ["mail"],
                loginUser: this.$store.state.user.user

            }
        },
        methods: {
            handleClick(e) {
                console.log(e.key)
                if (e.key === "avatar") {
                    this.$router.push("/info-layout");
                } else if (e.key === "sys-security-center") {
                    this.$router.push("/security-layout");
                } else if (e.key === "sys-person-info") {
                    this.$router.push("/info-layout");
                }
            },

            openShop() {
                let role = this.$store.state.user.user.type;
                if (role.indexOf("web-shop") !== -1) {

                } else {
                    this.$router.push("/user-apply-shop")
                }
            },

            /**
             * 退出
             */
            handleLogout() {
                console.log("退出");

                this.$store
                    .dispatch("Logout")
                    .then(resp => {
                        console.log("log", resp);
                        if (resp.flag) {
                            this.$message.success("退出成功", 1)
                            //清除菜单信息
                            this.$store.commit("INIT_ROUTES", []);
                            this.$router.push("/login");
                        } else {
                            this.$message.warning(resp.data.message, 2);
                        }
                    })
                    .catch(error => {
                        this.$message.warning("退出错误", 2);
                    });
            },

            test() {
                this.$message.success("a")
            }

        }
    }
</script>

<style scoped>
    #components-layout-demo-basic {
        text-align: center;
    }


    #components-layout-demo-basic .ant-layout-header,
    #components-layout-demo-basic .ant-layout-footer {
        background: #F5F5F5;
        color: #6C6C6C;
    }


    #components-layout-demo-basic > .ant-layout {
        margin-bottom: 48px;
    }

    #components-layout-demo-basic > .ant-layout:last-child {
        margin: 0;
    }

    .navMenu {
        background: #F5F5F5;

    }

    .topMenu {
        font-size: 12px;
        color: #868686;
    }
</style>